<template>
	<view class="container">
		<view v-if="total>0&&flag" class="message-item" v-for="item in list" @click="goDetail(item)">
			<view class="red-dot" v-if="item.status==0">
			</view>
			<view class="row1">
				<view class="img">
					<image src="/static/message/message3.png" mode=""></image>
				</view>
				<text>{{item.title}}</text>
				<text>{{item.dateFormat}}</text>
			</view>
			<view class="row2"> {{item.content}} </view>
		</view>
		<uni-load-more :status="hasMore ? 'loading' : 'noMore'"></uni-load-more>
		<view v-if=" !total&&flag" class="empty">
			<image src="/static/message/message5.png" mode=""></image>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				requestObj: {
					pageNum: 1,
					pageSize: 10,
					plate: 0
				},
				list: [],
				hasMore: false, // 是否加载
				total: 0,
				flag: false
			}
		},
		methods: {
			goDetail(item) {
				item.status = 1
				uni.navigateTo({
					url: `/pages/message/message-detail?id=${item.id}`
				})
			},
			async get_push_msg_list() {
				let res = await this.$fetch(this.$api.get_push_message_records_list, this.requestObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				this.flag = true
				this.hasMore = false
				uni.stopPullDownRefresh()
				this.total = res.total
				this.list = [...this.list, ...res.rows]
			}
		},
		onLoad() {
			this.list = []
			this.get_push_msg_list()
		},
		onShow() {},
		onReachBottom() {
			let allTotal = this.requestObj.pageNum * this.requestObj.pageSize
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.requestObj.pageNum++;
				this.hasMore = true
				this.get_push_msg_list() //调用加载数据方法
			} else {
				this.hasMore = false
				// console.log('已加载全部数据')
			}
		},
		onPullDownRefresh() {
			this.requestObj.pageNum = 1
			this.list = []
			//调用获取数据方法
			this.get_push_msg_list()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 1000);
		}
	}
</script>
<style lang="less" scoped>
	.container {
		min-height: calc(100vh - var(--status-bar-height));
		position: relative;

		&>.message-item {
			width: 690rpx;
			height: 172rpx;
			border-radius: 16rpx;
			background-color: #FFFFFF;
			margin: 20rpx auto;
			padding: 20rpx 20rpx 40rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			position: relative;

			&>.red-dot {
				position: absolute;
				left: 58rpx;
				top: 14rpx;
				width: 12rpx;
				height: 12rpx;
				border-radius: 50%;
				background-color: #F85A41;
				box-shadow: rgba(248, 90, 65, 0.50) 0 2rpx 6rpx 2rpx;
			}

			&>.row1 {
				display: flex;
				align-items: center;

				&>.img {
					width: 56rpx;
					height: 56rpx;
					background-color: #B3B3B3;
					border-radius: 50%;
					display: flex;
					align-items: center;
					justify-content: center;

					&>image {
						width: 29rpx;
						height: 34rpx;
					}
				}

				&>text:nth-child(2) {
					margin-left: 10rpx;
					color: #262626;
					font-weight: bold;
					max-width: 300rpx;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				&>text:nth-child(3) {
					margin-left: auto;
					font-size: 24rpx;
				}
			}

			&>.row2 {
				font-size: 24rpx;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;
			}
		}

		&>.empty {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 414rpx;
			height: 280rpx;

			&>image {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>